<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>价格走势 - 雁农冷链平台</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../static/sa.css">
	<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
</head>
<body>
	<div id="app">
		<!-- 页面标题 -->
		<div class="card">
			<div class="card-header">
				<h2><i class="icon-chart"></i> 价格走势</h2>
				<p>实时监控冷鲜商品价格变化趋势</p>
			</div>
		</div>

		<!-- 商品选择 -->
		<div class="card">
			<div class="card-body">
				<div class="search-form">
					<div class="form-item">
						<div class="form-group">
							<label>选择商品</label>
							<select name="product" v-model="selectedProduct" @change="updateChart">
								<option value="apple">苹果</option>
								<option value="cabbage">白菜</option>
								<option value="beef">牛肉</option>
								<option value="pork">猪肉</option>
								<option value="fish">鱼类</option>
							</select>
						</div>
						<div class="form-group">
							<label>时间范围</label>
							<select name="timeRange" v-model="timeRange" @change="updateChart">
								<option value="7">近7天</option>
								<option value="30">近30天</option>
								<option value="90">近3个月</option>
								<option value="365">近1年</option>
							</select>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 价格统计卡片 -->
		<div class="stats-grid">
			<div class="stat-item">
				<div class="card">
					<div class="card-body">
						<div class="stat-card">
							<div class="stat-icon" style="background: #1890ff;">
								<i class="icon-chart"></i>
							</div>
							<div class="stat-content">
								<h3>{{ currentPrice }}</h3>
								<p>当前价格(元/斤)</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="stat-item">
				<div class="card">
					<div class="card-body">
						<div class="stat-card">
							<div class="stat-icon" style="background: #52c41a;">
								<i class="icon-chart"></i>
							</div>
							<div class="stat-content">
								<h3>{{ avgPrice }}</h3>
								<p>平均价格(元/斤)</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="stat-item">
				<div class="card">
					<div class="card-body">
						<div class="stat-card">
							<div class="stat-icon" style="background: #fa541c;">
								<i class="icon-up"></i>
							</div>
							<div class="stat-content">
								<h3>{{ maxPrice }}</h3>
								<p>最高价格(元/斤)</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="stat-item">
				<div class="card">
					<div class="card-body">
						<div class="stat-card">
							<div class="stat-icon" style="background: #13c2c2;">
								<i class="icon-down"></i>
							</div>
							<div class="stat-content">
								<h3>{{ minPrice }}</h3>
								<p>最低价格(元/斤)</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 价格走势图 -->
		<div class="card">
			<div class="card-header">
				<h3>价格走势图</h3>
			</div>
			<div class="card-body">
				<div id="priceChart" style="height: 400px;"></div>
			</div>
		</div>

		<!-- 价格分析 -->
		<div class="card">
			<div class="card-header">
				<h3>价格分析</h3>
			</div>
			<div class="card-body">
				<div class="analysis-grid">
					<div class="analysis-item">
						<h4><i class="icon-tips"></i> 价格趋势</h4>
						<p>{{ priceAnalysis.trend }}</p>
					</div>
					<div class="analysis-item">
						<h4><i class="icon-survey"></i> 市场预测</h4>
						<p>{{ priceAnalysis.forecast }}</p>
					</div>
					<div class="analysis-item">
						<h4><i class="icon-engine"></i> 影响因素</h4>
						<p>{{ priceAnalysis.factors }}</p>
					</div>
					<div class="analysis-item">
						<h4><i class="icon-light"></i> 购买建议</h4>
						<p>{{ priceAnalysis.suggestion }}</p>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="../../static/kj/vue.min.js"></script>
	<script src="../../static/sa.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: {
				selectedProduct: 'apple',
				timeRange: '30',
				currentPrice: '12.8',
				avgPrice: '12.5',
				maxPrice: '14.2',
				minPrice: '11.8',
				priceAnalysis: {
					trend: '近期苹果价格呈现稳中有升的趋势，主要受季节性因素和供需关系影响。',
					forecast: '预计未来一周价格将保持稳定，可能会有小幅上涨，建议适量采购。',
					factors: '天气变化、运输成本、市场需求量、产地供应情况等因素影响价格波动。',
					suggestion: '当前价格处于合理区间，建议消费者可以适量购买，关注价格变化趋势。'
				},
				chart: null
			},
			mounted() {
				this.initChart();
			},
			methods: {
				initChart() {
					this.chart = echarts.init(document.getElementById('priceChart'));
					this.updateChart();
				},
				updateChart() {
					// 模拟价格数据
					const dates = this.generateDates();
					const prices = this.generatePrices();
					
					const option = {
						title: {
							text: this.getProductName() + '价格走势',
							left: 'center'
						},
						tooltip: {
							trigger: 'axis',
							formatter: function(params) {
								return params[0].name + '<br/>价格: ¥' + params[0].value + '/斤';
							}
						},
						xAxis: {
							type: 'category',
							data: dates,
							boundaryGap: false
						},
						yAxis: {
							type: 'value',
							name: '价格(元/斤)',
							min: function(value) {
								return (value.min * 0.9).toFixed(1);
							},
							max: function(value) {
								return (value.max * 1.1).toFixed(1);
							}
						},
						series: [{
							name: '价格',
							type: 'line',
							data: prices,
							smooth: true,
							lineStyle: {
								color: '#1890ff',
								width: 3
							},
							areaStyle: {
								color: {
									type: 'linear',
									x: 0, y: 0, x2: 0, y2: 1,
									colorStops: [
										{offset: 0, color: 'rgba(24, 144, 255, 0.3)'},
										{offset: 1, color: 'rgba(24, 144, 255, 0.1)'}
									]
								}
							}
						}]
					};
					
					this.chart.setOption(option);
					
					// 更新统计数据
					this.updateStats(prices);
				},
				generateDates() {
					const dates = [];
					const days = parseInt(this.timeRange);
					for (let i = days - 1; i >= 0; i--) {
						const date = new Date();
						date.setDate(date.getDate() - i);
						dates.push(date.getMonth() + 1 + '/' + date.getDate());
					}
					return dates;
				},
				generatePrices() {
					const prices = [];
					const days = parseInt(this.timeRange);
					let basePrice = 12.0;
					
					for (let i = 0; i < days; i++) {
						basePrice += (Math.random() - 0.5) * 0.5;
						prices.push(Math.max(10, Math.min(15, basePrice)).toFixed(1));
					}
					return prices;
				},
				updateStats(prices) {
					const numPrices = prices.map(p => parseFloat(p));
					this.currentPrice = prices[prices.length - 1];
					this.maxPrice = Math.max(...numPrices).toFixed(1);
					this.minPrice = Math.min(...numPrices).toFixed(1);
					this.avgPrice = (numPrices.reduce((a, b) => a + b, 0) / numPrices.length).toFixed(1);
				},
				getProductName() {
					const names = {
						apple: '苹果',
						cabbage: '白菜',
						beef: '牛肉',
						pork: '猪肉',
						fish: '鱼类'
					};
					return names[this.selectedProduct] || '商品';
				}
			}
		});
	</script>

	<style>
		/* 基础样式 */
		.card {
			background: white;
			border-radius: 8px;
			box-shadow: 0 2px 8px rgba(0,0,0,0.1);
			margin-bottom: 20px;
		}
		.card-header {
			padding: 20px;
			border-bottom: 1px solid #f0f0f0;
		}
		.card-body {
			padding: 20px;
		}
		.card-header h2, .card-header h3 {
			margin: 0;
			color: #333;
			font-size: 24px;
		}
		.card-header p {
			margin: 5px 0 0 0;
			color: #666;
		}
		
		/* 表单样式 */
		.search-form .form-item {
			display: flex;
			gap: 20px;
			align-items: center;
			flex-wrap: wrap;
		}
		.form-group {
			display: flex;
			flex-direction: column;
			gap: 5px;
		}
		.form-group label {
			font-weight: bold;
			color: #333;
		}
		.form-group select {
			padding: 8px 12px;
			border: 1px solid #ddd;
			border-radius: 4px;
			min-width: 120px;
		}
		
		/* 统计卡片网格 */
		.stats-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
			gap: 20px;
			margin-bottom: 20px;
		}
		.stat-card {
			display: flex;
			align-items: center;
			padding: 10px 0;
		}
		.stat-icon {
			width: 60px;
			height: 60px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 15px;
		}
		.stat-icon i {
			font-size: 24px;
			color: white;
		}
		.stat-content h3 {
			margin: 0;
			font-size: 24px;
			font-weight: bold;
			color: #333;
		}
		.stat-content p {
			margin: 5px 0 0 0;
			color: #666;
			font-size: 14px;
		}
		
		/* 分析网格 */
		.analysis-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 20px;
		}
		.analysis-item {
			padding: 20px;
			background: #f8f9fa;
			border-radius: 8px;
			height: 100%;
			transition: all 0.3s;
		}
		.analysis-item:hover {
			background: #e9ecef;
			transform: translateY(-2px);
		}
		.analysis-item h4 {
			margin: 0 0 15px 0;
			color: #333;
			font-size: 16px;
			display: flex;
			align-items: center;
		}
		.analysis-item h4 i {
			margin-right: 8px;
			color: #1890ff;
			font-size: 18px;
		}
		.analysis-item p {
			margin: 0;
			color: #666;
			line-height: 1.6;
			font-size: 14px;
		}
		
		/* 图标样式 */
		.icon-chart:before { content: '📊'; }
		.icon-up:before { content: '📈'; }
		.icon-down:before { content: '📉'; }
		.icon-tips:before { content: '💡'; }
		.icon-survey:before { content: '🔍'; }
		.icon-engine:before { content: '⚙️'; }
		.icon-light:before { content: '💰'; }
	</style>
</body>
</html>